20 - Speech Detection

tags: JavaScript30

專案簡介

第十九天的有點難，延至明天做

第二十天的目標是讀入使用者的語音輸入，並將其輸出到網頁上

課程影片：JS30 20
導讀影片：Alex

初始文件

Github 檔案位置：20 - Speech Detection

網站初始的樣子

可以先玩玩 最後的成品

正式製作

首先，先嘗試讀入使用者的語音輸入，這裡利用了 Web Speech API 的 SpeechRecognition 語音識別功能

這裡創造一個 new SpeechRecognition() 物件，並設定 interimResults = true 讓語音輸入後可以即時輸出

接下來在 recognition 下 result 事件監聽，使其在有產生音訊輸入結果後，便將 data 拿去做處理，轉成字串後輸出於 console 上

window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;

const recognition = new SpeechRecognition();
recognition.interimResults = true;

recognition.addEventListener('result', e => {
  const transcript = Array.from(e.results)
    .map(result => result[0])
    .map(result => result.transcript)
    .join();
  console.log(e.results);
  console.log(transcript);
});

recognition.start();

接下來便是將我們接收到的語音輸入字串，輸出至頁面上，這裡用正則表達式過濾掉了髒話www

以及判斷e.results[0].isFinal == true 時才顯示在頁面上，避免在尚未完成辨識時就輸出許多辨識中的字串，拔掉後如下（只念了 1234567）

最後，由於希望可以進行多次的語音辨識，所以可以偵測每次的語音輸入事件結束，來開啟新的輸入事件

let p = document.createElement('p');
const words = document.querySelector('.words');
words.appendChild(p);

recognition.addEventListener('result', e => {
  const transcript = Array.from(e.results)
    .map(result => result[0])
    .map(result => result.transcript)
    .join();
  console.log(e.results);
  console.log(transcript);

  const poopScript = transcript.replace(/三小|幹/gi, '?');
  p.textContent = poopScript;

  if (e.results[0].isFinal) {
    p = document.createElement('p');
    words.appendChild(p);
  }
});

recognition.addEventListener('end', recognition.start);

最後程式碼

window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;

const recognition = new SpeechRecognition();
recognition.interimResults = true;

let p = document.createElement('p');
const words = document.querySelector('.words');
words.appendChild(p);

recognition.addEventListener('result', e => {
  const transcript = Array.from(e.results)
    .map(result => result[0])
    .map(result => result.transcript)
    .join();
  console.log(e.results);
  console.log(transcript);

  const poopScript = transcript.replace(/三小|幹/gi, '?');
  p.textContent = poopScript;

  if (e.results[0].isFinal) {
    p = document.createElement('p');
    words.appendChild(p);
  }
});
recognition.addEventListener('end', recognition.start);

recognition.start();

完成結果圖

最後的成品

結語

以上是第二十天的製作紀錄，如有錯誤或不足的地方還請多多指教 >.<

JavaScript Speech Recognition #JavaScript30 20/30
[ Alex 宅幹嘛 ] 深入淺出 Javascript30 快速導覽 | Day 20：Speech Detection
MDN Web Docs